/**
 * Created by fanweihua on 2016/12/3.
 */
import React from 'react';
import DialogHtml from './dialogHtml.js';

const Dialog = React.createClass({
    getInitialState: function () {
        return {
            html: DialogHtml.html,
            javaScriptHtml: DialogHtml.javaScriptHtml,
        };
    },
    render(){
        return (
            <div className="Z_slideIn">
                <div className="page slideIn">
                    <div className="Z_content_code">
                        <div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
                        <div dangerouslySetInnerHTML={{__html: this.state.javaScriptHtml}}></div>
                    </div>
                </div>
                <div className="Z_content">
                    <div className="Z_panel-body-backgound">
                        <DialogNav></DialogNav>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = Dialog;
const DialogNav = React.createClass({
    componentDidMount: function () {
        DialogHtml._go();
        $(".weui-mask").css({
            "position": "absolute"
        });
        $(".weui-dialog").css({
            "position": "absolute",
            "width": "100%"
        });
    },
    render(){
        return (
            <div className="Z_panel-body">
                <div className="page__hd">
                    <h1 className="page__title">Dialog</h1>
                    <p className="page__desc">对话框</p>
                </div>
                <div className="page__bd page__bd_spacing">
                    <a href="javascript:;" className="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
                    <a href="javascript:;" className="weui-btn weui-btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
                    <a href="javascript:;" className="weui-btn weui-btn_default" id="showAndroidDialog1">Android
                        Dialog样式一</a>
                    <a href="javascript:;" className="weui-btn weui-btn_default" id="showAndroidDialog2">Android
                        Dialog样式二</a>
                </div>
                <div id="dialogs">
                    <div className="js_dialog" id="iosDialog1" style={{opacity: 0, display: "none"}}>
                        <div className="weui-mask"></div>
                        <div className="weui-dialog">
                            <div className="weui-dialog__hd"><strong className="weui-dialog__title">弹窗标题</strong></div>
                            <div className="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
                            <div className="weui-dialog__ft">
                                <a href="javascript:;" className="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
                                <a href="javascript:;" className="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
                            </div>
                        </div>
                    </div>
                    <div className="js_dialog" id="iosDialog2" style={{display: "none"}}>
                        <div className="weui-mask"></div>
                        <div className="weui-dialog">
                            <div className="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
                            <div className="weui-dialog__ft">
                                <a href="javascript:;" className="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
                            </div>
                        </div>
                    </div>
                    <div className="js_dialog" id="androidDialog1" style={{display: "none"}}>
                        <div className="weui-mask"></div>
                        <div className="weui-dialog weui-skin_android">
                            <div className="weui-dialog__hd"><strong className="weui-dialog__title">弹窗标题</strong></div>
                            <div className="weui-dialog__bd">
                                弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
                            </div>
                            <div className="weui-dialog__ft">
                                <a href="javascript:;" className="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
                                <a href="javascript:;" className="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
                            </div>
                        </div>
                    </div>
                    <div className="js_dialog" id="androidDialog2" style={{display: "none"}}>
                        <div className="weui-mask"></div>
                        <div className="weui-dialog weui-skin_android">
                            <div className="weui-dialog__bd">
                                弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
                            </div>
                            <div className="weui-dialog__ft">
                                <a href="javascript:;" className="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
                                <a href="javascript:;" className="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});